<template>
  <el-dialog :title="title" :visible.sync="$parent.openMain" width="45%">
    <div class="dialog_div">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="80px">
        <el-form-item label="模块" prop="moduleName">
          <el-input v-model="formData.moduleName" placeholder="请输入模块名称" clearable :style="{ width: '100%' }">
          </el-input>
        </el-form-item>
        <el-form-item label="项目" prop="projectName">
          <el-input v-model="formData.projectName" placeholder="请输入项目名称" clearable :style="{ width: '100%' }">
          </el-input>
        </el-form-item>
        <el-form-item label="保养类型" prop="typeId">
          <el-select v-model="formData.typeId" placeholder="请选择保养类型" clearable :style="{ width: '100%' }">
            <el-option v-for="(item, index) in typeIdOptions" :key="index" :label="item.typeName"
              :value="item.upkeepTypeId" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述" prop="explanation">
          <el-input v-model="formData.explanation" type="textarea" placeholder="请输入保养项目描述信息"
            :autosize="{ minRows: 5, maxRows: 5 }" :style="{ width: '100%' }"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="kind">
          <el-select v-model="formData.kind" placeholder="请选择保养项目检查类型" clearable :style="{ width: '100%' }">
            <el-option v-for="(item, index) in kindOptions" :key="index" :label="item.label" :value="item.value"
              :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选项" prop="contentI" v-if="formData.kind === '0'">
          <el-input v-model="formData.contentI" placeholder="请输入选项信息" clearable :style="{ width: '100%' }">
          </el-input>
        </el-form-item>
        <el-form-item label="正常选项" prop="contentII" v-if="formData.kind === '0'">
          <el-input v-model="formData.contentII" placeholder="请输入正常选项" clearable :style="{ width: '100%' }">
          </el-input>
        </el-form-item>
        <el-form-item label="下限" prop="contentI" v-if="formData.kind === '1'">
          <el-input-number v-model="formData.contentI" placeholder="下限" :style="{ width: '100%' }"
            controls-position=right>
          </el-input-number>
        </el-form-item>
        <el-form-item label="上限" prop="contentII" v-if="formData.kind === '1'">
          <el-input-number v-model="formData.contentII" placeholder="上限" :style="{ width: '100%' }"
            controls-position=right>
          </el-input-number>
        </el-form-item>
        <el-form-item label="附件" prop="file">
          <FileUpload v-model="formData.file" :limit="1" :fileSize="50"
            :fileType="['xls', 'xlsx', 'doc', 'docx', 'pdf', 'jpg', 'png']">
          </FileUpload>
        </el-form-item>

      </el-form>
    </div>
    <div slot="footer" align="center">
      <el-button @click="() => $parent.openMain = false">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getUpkeepTypeList, postCreatedUpkeep, putCreatedUpkeep } from '@/api/maintenance/insurance/insurance.js'
export default {
  components: {},
  props: ['title', 'rowObj'],
  data () {
    return {
      formData: {
        moduleName: '',
        projectName: undefined,
        typeId: undefined,
        explanation: undefined,
        kind: undefined,
        contentI: undefined,
        contentII: undefined,
        file: ''
      },
      rules: {
        moduleName: [{
          required: true,
          message: '必填',
          trigger: 'blur'
        }],
        projectName: [{
          required: true,
          message: '必填',
          trigger: 'blur'
        }],
        typeId: [{
          required: true,
          message: '必填',
          trigger: 'change'
        }],
        explanation: [{
          required: true,
          message: '必填',
          trigger: 'blur'
        }],
        kind: [{
          required: true,
          message: '必填',
          trigger: 'change'
        }],
        contentI: [{
          required: true,
          message: '必填',
          trigger: 'blur'
        }],
        contentII: [{
          required: true,
          message: '必填',
          trigger: 'blur'
        }],
      },
      typeIdOptions: [],
      kindOptions: [{
        "label": "选项",
        "value": '0'
      }, {
        "label": "极值",
        "value": '1'
      }, {
        "label": "输入",
        "value": '2'
      }],
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getList()
  },
  mounted () { },
  methods: {
    getList () {
      let params = {
        status: '0'
      }
      getUpkeepTypeList(params).then(res => {
        this.typeIdOptions = res.data
      })
      if (this.title === '修改保养项目') {
        this.formData = JSON.parse(JSON.stringify(this.rowObj))
      }
    },
    handleConfirm () {
      console.log(this.formData.file);
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        if (this.title === '添加保养项目') {//新增
          let params = {
            ...this.formData,
            upkeepLevelId: this.$parent.rowObj.upkeepLevelId
          }
          postCreatedUpkeep(params).then(res => {
            if (res.code === 200) {
              this.$message.success('操作成功')
              this.$parent.openMain = false
              this.$parent.getList()
            }
          }).catch(err => {
            console.log(err);
          })
        } else {//修改
          let params = {
            ...this.formData,
            upkeepProjectId: this.rowObj.upkeepProjectId
          }
          putCreatedUpkeep(params).then(res => {
            if (res.code === 200) {
              this.$message.success('操作成功')
              this.$parent.openMain = false
              this.$parent.getList()
            }
          }).catch(err => {
            console.log(err);
          })
        }
      })
    },
  }
}

</script>
<style lang="scss" scoped>
.dialog_div {
  width: 55%;
  margin: 0 auto;
}
</style>